import { reactive, ref } from "vue";
// 1
import * as echarts from "echarts";
// 双柱状图
export const zhuzhuangData = ref({
  grid: {
    top: "10%",
    bottom: "10%"
  },
  title: {
    left: "5%",
    text: '',
    subtext: '件'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    right: "0%",
    show: true,
    data: ['今日数', '七日平均数'],
    textStyle: {
      color: '#DEEBFF' // 这里设置为红色
    }
  },
  toolbox: {
    show: false,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#DEEBFF' // 设置 x 轴颜色为红色
        }
      },
      // prettier-ignore
      data: ['安全运行', '城市治理', '群众呼声', '风险预警']
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#DEEBFF' // 设置 x 轴颜色为红色
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: 'rgba(128, 164, 229, 0.4)', // 可设置颜色
          width: 1 // 可设置宽度
        }
      },
    }
  ],
  series: [
    {
      name: '今日数',
      type: 'bar',
      data: [
        1879, 1879, 1879, 1879
      ],
      barWidth: "20px",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  // 反转渐变方向
          { offset: 1, color: 'rgba(19,37,67,0.08)' },   // 顶部颜色
          { offset: 0, color: '#3caab7' } // 底部颜色
        ])
      },
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      }
    },
    {
      name: '七日平均数',
      type: 'bar',
      barWidth: "20px",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  // 反转渐变方向
          { offset: 1, color: 'rgba(19, 37, 67, 0.08)' },   // 顶部颜色
          { offset: 0, color: '#00aeff' } // 底部颜色
        ])
      },
      data: [
        1879, 1879, 1879, 1879
      ],
      markPoint: {
        data: [
          { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
          { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
        ]
      }
    }
  ]
})





